@import './base.less';

body {
  background-color: #f5f5f5;
  padding-bottom: 6.6667vw;
}

.header {
  display: flex;
  align-items: center;
  height: 34.6667vw;
  background-image: url(../img/user-header2.png);

  .tou {
    display: flex;
    width: 41.3333vw;
    height: 13.3333vw;
    // background-color: aqua;
    margin-left: 3.3333vw;

    img {
      width: 13.3333vw;
      height: 13.3333vw;
      border-radius: 50%;
    }

    .tou1 {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin-left: 2.9333vw;
      width: 24vw;
      height: 13.3333vw;
      // background-color: red;

      p {
        font-size: 4.5333vw;
        color: #c59a46;
        font-weight: 700;

        &:nth-child(2) {
          font-size: 4vw;
          padding-top: 2.6667vw;
          font-weight: 400;
        }
      }

    }
  }
}

.lan {

  height: 23.3333vw;

  // background-color: pink;
  ul {
    display: flex;
    height: 23.3333vw;
    background-color: #fff;

    li {
      display: flex;
      height: 23.3333vw;
      justify-content: center;
      align-items: center;
      text-align: center;
      width: 25%;

      //  background-color: #fff;
      span {
        font-size: 5.8667vw;
        // text-align: center;

      }

      img {
        width: 10.6667vw;
        height: 4.4vw;
        font-size: 4.5333vw;
        text-align: center;
      }

      p {
        font-size: 3.7333vw;
        padding-top: 1.3333vw;
        color: #666;

      }

      &:last-child {
        border-left: 1px solid #000;
      }
    }
  }
}

.zhongjian {
  position: relative;
  margin-top: 2vw;
  height: 20.5333vw;
  // background-color: pink;
  margin-bottom: 1.3333vw;

  .pic {
    position: absolute;
    left: 2.9333vw;
    top: 0;
    width: 94vw;
    height: 20.5333vw;
    background-color: #fff;

    ul {
      display: flex;

      height: 20.5333vw;

      li {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 25%;
        height: 20.5333vw;

        a {
          display: flex;
          flex-direction: column;
          align-items: center;

          span {
            font-size: 5.8667vw;
          }

          p {
            font-size: 3.7333vw;
            padding-top: 2vw;
          }
        }

      }
    }
  }
}

.tu {
  height: 51.8667vw;
  // background-color: #fff;
  padding: 2.9333vw;
  .box {
    display: flex;
    align-items: center;
    height: 5.3333vw;
    background-color: #fff;
    padding-bottom: 1.3333vw;
    border: 0;

    h4 {
      font-size: 4vw;
      padding-left: 1.7333vw;
    }
  }

  .box2 {

    // width: 94vw;
    height: 40.6667vw;
    background-color: #fff;

    ul {
      display: flex;
      flex-wrap: wrap;
      height: 40.6667vw;

      li {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 25%;
        height: 16.2667vw;

        span {
          font-size: 5.8667vw;
          color: #ff3800;
        }

        p {
          font-size: 3.7333vw;
          padding-top: 2vw;
          color: #545454;
        }

        // background-color: blanchedalmond;
      }
    }
  }
}

.footer {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 6.6667vw;
  background-color: #fff;

  ul {
    display: flex;
    justify-content: space-evenly;
    height: 6.6667vw;

    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      // width: 25%;
      height: 6.6667vw;

      &:last-child span {
        color: rgb(250, 34, 9);
      }

      &:last-child p {
        color: rgb(250, 34, 9);
      }

      // background-color:#fff;
      span {
        font-size: 3.2vw;
      }

      p {
        font-size: 1.6vw;
      }
    }
  }
}